<template>
  <panel-head :route="route"/>
  <el-table 
    :data="menuListData.list">
    <el-table-column prop="id" label="ID" />
    <el-table-column prop="name" label="昵称" />
    <el-table-column prop="permissions_id" label="所属组别" >
      <template #default="scope">
        {{ permissionName(scope.row.permissions_id) }}
      </template>
    </el-table-column>
    <el-table-column prop="mobile" label="手机号码" />
    <el-table-column prop="active" label="状态" >
      <template #default="scope">
        <el-tag :type="scope.row.active ?'success':'danger'"> {{ scope.row.active ? '正常':'失效' }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="create_time" label="创建时间">
      <template #default="scope">
        <div class="flex-box">
          <el-icon><Clock/></el-icon>
          <span>{{ scope.row.create_time }}</span>
        </div>
        
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="open(scope.row)">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
   <div class="pagination-info">
     <el-pagination
      v-model="page.pageNum"
      :page-size="page.pageSize"
      :bakcground="false"
      size="small"
      layout="total,prev,pager,next"
      :total="menuListData.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
     />
   </div>
   <!-- 弹窗 -->
    <el-dialog 
      v-model="dislogFormVisible"
      title="编辑权限"
      :before-close="beforeClose"
      width="500"
      >
        <el-form 
        ref="formRef"
        label-width="100px"
        label-position="left"
        :model="form"
        :rules="rules"
        >
          <el-form-item prop="mobile" label="手机号码">
            <el-input v-model="form.mobile" disabled ></el-input>
          </el-form-item>
          <el-form-item prop="name" label="昵称">
            <el-input v-model="form.name" ></el-input>
          </el-form-item>
          <el-form-item prop="permissions_id" label="菜单权限">
            <el-select
              v-model="form.permissions_id"
              placeholder="请选择菜单权限"
              style="width: 240px;"
              >
              <el-option v-for="item in menuSelectListData"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button type="primary" @click="confirm(formRef)">确认</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { onMounted, reactive,ref } from 'vue';
import { authAdmin ,menuSelectList, updateUser} from '@/api/index.js'
import dayjs from 'dayjs';
import { useRoute } from 'vue-router';

const route = useRoute();

// 获取权限列表数据
const menuListData = reactive({
  list: [],
  total:0
});

const menuSelectListData = ref([])

const permissionName = (rowId)=>{
  // console.log('rowId',rowId)
  // console.log('menuSelectListData',menuSelectListData)
  const adminLevels = menuSelectListData.value.find(item => item.id === rowId)
  // console.log('adminLevels',adminLevels)
  return adminLevels ? adminLevels.name :'超级管理员123'
}

const authAdminDate = async () =>{
  await authAdmin(page).then(res=>{
    const {list,total} = res.data.data
    list.forEach(el => {
      // console.log('el.create_time',el.create_time)
      el.create_time = dayjs(el.create_time).format( 'YYYY-MM-DD');
    });
    menuListData.list = list
    menuListData.total = total
    // console.log(res)
  }).catch(err=>{
    console.error(err)
  })
}

onMounted(() => {
  authAdminDate()
  // getMenuSelectList();
  menuSelectList().then(({data})=>{
    menuSelectListData.value =data.data
    // form.value = data.data
  })
})

// 定义表单引用
const formRef = ref(null);
// 获取用户列表
const page = reactive({
  pageNum:1,
  pageSize:10,
})

// 处理分页大小变化
const handleSizeChange = (val)=>{
  page.pageSize = val;
  getMenuList();
}

// 处理当前页变化
const handleCurrentChange = (val)=>{
  page.pageNum = val;
  getMenuList();
}

// 打开对话框
const dislogFormVisible = ref(false)

const beforeClose = ()=>{
  dislogFormVisible.value = false
}

const form = reactive({
  modile:'',
  name: '',
  permissions_id:''
})

const rules = reactive({
  name:[{ required: true, message: '请输入昵称', trigger: 'blur' }],
  permissions_id: [{ required: true, message: '请选择所属组别', trigger: 'change' }]
})

const open =(rowData)=>{
  dislogFormVisible.value = true
  console.log('rowData',rowData)
  Object.assign(form,{
    mobile: rowData.mobile,
    name: rowData.name,
    permissions_id: rowData.permissions_id
  })
}

// 提交表单数据
const confirm = async (formEl)=>{
  if(!formEl) return
  await formEl.validate((valid,fields)=>{
    if(valid){
      const { name ,permissions_id}= form
      updateUser({name,permissions_id}).then(({data})=>{
        if(data.code === 10000){
          dislogFormVisible.value = false
          authAdminDate()
        }
      })
    }else{
      console.log('error submit!', fields)
    }
  })
}
</script>

<style lang="less" scoped>
.flex-box {
  display: flex;
  align-items: center;
  span{
    margin-left: 5px;
  }
}
.pagination-info{
  width: 100%;
  text-align: right;
  // margin-top: 10px;
  height: 45px;
  line-height: 45px;
  background-color: white;
  display: flex;
  justify-content: end;
}
</style>